<template>
	<view>
		<!-- custompop -->
		<cover-view>
			<u-popup :show.sync="pupshow" :safeAreaInsetBottom="false"
			 @close="closeClick" :round="20" mode="bottom">
				<view class="CustomPopBox">	
					<!-- 头部 -->
					<view class="popheader FlexBetween">
						<view class="pclose u-flex" @click="closeClick">
							<u-icon name="close"></u-icon>
						</view>
						<view class="ptitle FlexItem">
							{{ptitle}}
						</view>
					</view>
					
					<!-- 内容 -->
					<view class="popContent">
						<!-- 选择模式 --> 
						<template v-if="isselect">
							<!--  -->
							<view class="selectList" >
								<view class="selectItem FlexBetween" v-for="(val, ind) in pradiolist" :class="{'selisActive ': val.ischeck}" :key="ind" @click="radiovalClick(val, ind)" >
									<view class="ltitle">
										{{val.label}}
									</view>
									<view class="check_icon">
										<u-icon name="checkmark-circle-fill" color="#fd7400" size="35"></u-icon>
									</view>
								</view>
							</view>
						</template>
						<!-- 多选模式 -->
						<template v-else-if="ismultiple">
							<view class="selectList" >
								<!-- 全选or搜索 -->
								<view class="header" >
									<view class="btn" @click="isAllSelect">{{btnBool ? '全选' : '取消全选'}}</view>
									<u--input placeholder="搜索" border="surround" suffixIcon="search"
										suffixIconStyle="color: #909399;font-size: 22px;" 
										@input="soItem"></u--input>
								</view>
								<view class="selectItem FlexBetween" v-for="(val, ind) in searchList" :class="{'selisActive ': val.ischeck}" :key="ind" @click="checkClick(val, ind)">
									<view class="ltitle">
										{{val.label}}
									</view>
									<view class="check_icon">
										<u-icon name="checkmark-circle-fill" color="#fd7400" size="35"></u-icon>
									</view>
								</view>
							</view>
						</template>
						<!-- 自定义内容模式 -->
						<template v-else>
							<slot name="content"></slot>
						</template>
					</view>
					
					<!-- 底部 -->
					<template v-if="botshow">
						<view class="bottom_mask"></view>
						<view class="CustomBottom FlexAlign">
							<view class="leftbtn delbtn" v-if="delbtn" @click="closeClick">
								{{deltxt}}
							</view>
							<view class="leftbtn" v-else @click="closeClick">
								取消
							</view>
							<view class="saveBtn FlexRow FlexItem" @click="saveClick">
								{{savetxt}}
							</view>
						</view>
					</template>
					
			
				</view>
			</u-popup>
		</cover-view>
	</view>
</template>

<script>
	export default {
		name: 'custompop',
		props: {
			// 底部 是否显示
			botshow: {
				type: Boolean,
				default: true,
			},
			// 保存 是否触发隐藏弹窗
			isClose: {
				type: Boolean,
				default: true,
			},
			// 删除 是否显示
			delbtn: {
				type: Boolean,
				default: false,
			},
			// 删除按钮文字
			deltxt: {
				type: String,
				default: '删除',
			},
			// 保存按钮文字
			savetxt: {
				type: String,
				default: '确认',
			},
			// 标题
			ptitle: {
				type: String,
				default: '弹窗',
			},
			// 是否为选择模式
			isselect: {
				type: Boolean,
				default: false,
			},
			// 是否为多选
			ismultiple: {
				type: Boolean,
				default: false,
			},
			// 选择模式列表字符串
			radioarr: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				pupshow: false,  // 弹窗显示
				pupName: null,	// 弹窗名称
				pradiolist: [],  // 选择模式列表
				searchList: [], // 搜索列表
				btnBool: true,	 // 全选或取消全选
			}
		},
		watch: {
			radioarr: {
				handler(newVal) {
					// console.log(newVal)
					this.setRadioArr()
				},
				deep: true,
			},
			pradiolist: {
				handler(newVal) {
					this.searchList = newVal;
				},
				deep: true,
			},
		},
		methods: {
			// 设置选择列表
			setRadioArr(){ 
				let cur_str = this.radioarr
				if (cur_str && typeof(cur_str) == 'string') {
					let newArr = JSON.parse(cur_str) || []
					this.pradiolist = newArr
					console.log('pradiolist', this.pradiolist)
				}
			},
			// 选项点击
			radiovalClick(val, ind){
				
				if(!this.ismultiple) {
					for(let v of this.pradiolist) {
						v.ischeck = false
					}
					console.log(this.pradiolist,'ismultiple')
				}
				val.ischeck = !val.ischeck
				if(!this.ismultiple) {
					this.finalSave()
				}
				
				this.$emit('saveRadiovalClick', val)
			},
			// 多选
			checkClick(val, ind) {
				val.ischeck = !val.ischeck;
				console.log(this.pradiolist,'ismultiple')
			},
			// 最终保存输出结果
			finalSave(){
				if(!this.botshow) {
					this.headerClose();
				}
				let newList = []
				for(let item of this.pradiolist){
					if(item.ischeck) {
						let newEle = {
							id: item.id,
							label: item.label,
							item: item
						}
						newList.push(newEle)
					}
				}
				this.$emit('outputradio', newList)
			},
			// 关闭弹窗
			headerClose() {
				this.pupshow = false;
			},
			// 保存点击
			saveClick() {
				if(this.ismultiple) {
					this.finalSave();
					this.$emit('saveclick')
					this.headerClose();
					return
				}
				if(this.isClose) {
					this.headerClose()
				}
				this.$emit('saveclick')
			},
			// 取消、删除点击
			closeClick() {
				this.headerClose()
				this.$emit('closeclick')
			},
			// 全选or取消全选员工
			isAllSelect(){
				if(this.btnBool) {
					// this.selectActive = this.empList.map((i, s) => s);
					this.pradiolist.forEach(val => {
						val.ischeck = true;
					})
				}else {
					this.pradiolist.forEach(val => {
						val.ischeck = false;
					})
				}
				this.btnBool = !this.btnBool;
			},
			// 搜索
			soItem(keyword){
				console.log(keyword);
				this.searchList = [];
				this.pradiolist.map(val => {
					if(val.label.indexOf(keyword) != -1) {
						this.searchList.push(val)
					}
				})
				// let value = e.detail.value;
				// this.hiddenList = [];
				// this.selectList.forEach((item, index) => {
				// 	let idx = item.label.indexOf(value);
				// 	if(idx == -1){
				// 		this.hiddenList.push(index);
				// 	}
				// });
				// // this.$forceUpdate();
				// console.log(e, this.hiddenList)
			},
		},

	}
</script>

<style lang="scss">
	.CustomPopBox {
		max-height: 80vh;
		overflow: auto;
		border-radius: 20rpx 20rpx 0 0;
	}

	.popheader {
		padding: 30rpx 60rpx;
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 50;
		background: #fff;

		.pclose {
			width: 40rpx;
		}

		.ptitle {
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
		}
	}

	.popContent {
		width: 100%;
	}

	.bottom_mask,
	.CustomBottom {
		width: 100%;
		height: 160rpx;
	}

	.CustomBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 50;
		background: #fff;
		padding: 0 60rpx 0 60rpx;

		.leftbtn {
			min-width: 240rpx;
			font-size: 36rpx;
			color: #999;
			text-align: center;
		}

		.delbtn {
			color: red;
		}

		.saveBtn {
			height: 100rpx;
			background: #fd7400;
			box-shadow: 0px 7px 40px rgba(253, 112, 8, 0.2);
			border-radius: 16rpx;
			font-size: 36rpx;
			min-width: 400rpx;
			color: #fff;
			text-align: center;
		}
	}

	.selectList {
		padding: 0 60rpx 30rpx;
		.selectItem {
			padding: 30rpx 0;
			&:last-of-type {
				padding-bottom: 0;
			}

			&.selisActive  {
				.ltitle {
					color: #fd7400;
					font-weight: bold;
				}

				.check_icon {
					display: block;
				}
			}

			.ltitle {
				color: #000;
				font-size: 32rpx;
			}

			.check_icon {
				display: none;
			}
		}
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.btn {
			width: 24%;
			// text-align: center;
		}
	}
</style>